<template>
  <div style="height: 850px">
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>
<script>
// import routesList from "@/router/index";
export default {
  name: 'homePage',
  data() {
    return {
      currentRouter: this.$route.path,
      routesList: this.$router.options.routes,
      isCollapse: true,
      logo: require('@/assets/images/logo1.png'),
      modeDisplay: true, //菜单和头部展示隐藏
    }
  },
  mounted() {
    this.getUrlParams()
  },
  computed: {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    toNav(router) {
      console.log(this.$route.path)
      this.currentRouter = router
      this.$router.push(router)
    },
    getUrlParams() {
      let url = window.location.href
      // 通过 ? 分割获取后面的参数字符串
      let urlStr = url.split('?')[1]
      // 创建空对象存储参数
      let obj = {}
      if (urlStr) {
        // 再通过 & 将每一个参数单独分割出来
        let paramsArr = urlStr.split('&')
        for (let i = 0, len = paramsArr.length; i < len; i++) {
          // 再通过 = 将每一个参数分割为 key:value 的形式
          let arr = paramsArr[i].split('=')
          obj[arr[0]] = arr[1]
        }
        // return obj
        if (obj) {
          //displayMode=cliplicit
          if (obj.displayMode) {
            this.modeDisplay = false
          } else {
            this.modeDisplay = true
          }
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
header {
  min-width: 1805px; //缩放超出的时候保证头部还有背景颜色
  //width: 100%;
  height: 7vh;
  background: #0a55a6;
  display: flex;
  align-items: center;
  padding: 0 40px;
  .topleft {
    display: flex;
    .image {
      display: inline-block;
      width: 54px;
      height: 40px;
      background: url(@/assets/images/logo1.png) no-repeat;
    }
    .text {
      display: inline-block;
      margin-left: 10px;
      font-size: 26px;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
    }
  }
}
.leftHeader {
  width: 90%;
  color: rgba(64, 158, 255, 1);
  font-size: 20px;
  text-align: center;
  font-weight: 700;
  border-bottom: 1px dashed rgba(64, 158, 255, 1);
  margin: auto;
  margin-bottom: 10px;
  padding: 10px 0;
  // margin-top: 10px;
  .headerTitle {
    width: 140px;
    font-size: 32px;
    margin: auto;
  }
}
.headerTop {
  width: 100%;
  height: 80px;
  background-color: rgba(1, 53, 122);

  font-size: 30px;
  line-height: 80px;
  padding-left: 26px;
  // color: #fff;
  color: #272626;

  box-sizing: border-box;
}

.contentWrap {
  // width: 100%;
  min-width: 1805px; //缩放超出的时候保证头部还有背景颜色
  //height: 93vh;
  height: 100%; //缩放超出的时候保证头部还有背景颜色
  display: flex;
  justify-content: space-between;
  background: #f3f4f7;
  .left {
    width: 240px;
    background-color: rgba(255, 255, 255, 1);
    .everyNavAv {
      margin: 10px 24px;
      height: 50px;
      line-height: 50px;
      border-radius: 10px;
      cursor: pointer;
      background-color: #3867ff;
      font-size: 18px;
      color: white;
      display: flex;
      justify-content: left;
      padding-left: 15%;
      // transition: all 0.5s;
    }
    .everyNav {
      height: 50px;
      line-height: 50px;

      cursor: pointer;
      align-items: center;
      margin: 10px 24px;
      font-size: 18px;
      color: #272626;
      display: flex;
      justify-content: left;
      padding-left: 15%;
    }
  }

  .right {
    width: calc(100% - 240px);
    // width: 100%;
    height: 100%;
    .content {
      width: 100%;
      height: 100%;
      padding: 1%;
      // height: calc(100% - 50px);
      height: 100%;
    }
  }
}

.everyNavAv:nth-child(1)::before,
.everyNavAv:nth-child(2)::before,
.everyNavAv:nth-child(3)::before,
.everyNavAv:nth-child(4)::before,
.everyNavAv:nth-child(5)::before {
  content: '';
  transform: translateY(12px);
  display: inline-block;
  width: 28px;
  height: 28px;
}

.everyNavAv:nth-child(1)::before {
  background: url(@/assets/layout/collect_active.png) no-repeat;
}
.everyNavAv:nth-child(2)::before {
  background: url(@/assets/layout/photovoltaic_active.png) no-repeat;
}
.everyNavAv:nth-child(3)::before {
  background: url(@/assets/layout/windpower_active.png) no-repeat;
}
.everyNavAv:nth-child(4)::before {
  background: url(@/assets/layout/conventional_active.png) no-repeat;
}
.everyNavAv:nth-child(5)::before {
  background: url(@/assets/layout/maintenance_active.png) no-repeat;
}
.everyNav:nth-child(1)::before,
.everyNav:nth-child(2)::before,
.everyNav:nth-child(3)::before,
.everyNav:nth-child(4)::before,
.everyNav:nth-child(5)::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
}

.everyNav:nth-child(1)::before {
  background: url(@/assets/layout/collect.png) no-repeat;
}
.everyNav:nth-child(2)::before {
  background: url(@/assets/layout/photovoltaic.png) no-repeat;
}
.everyNav:nth-child(3)::before {
  background: url(@/assets/layout/windpower.png) no-repeat;
}
.everyNav:nth-child(4)::before {
  background: url(@/assets/layout/conventional.png) no-repeat;
}
.everyNav:nth-child(5)::before {
  background: url(@/assets/layout/maintenance.png) no-repeat;
}
</style>
